"use client"

import Image from 'next/image';
import HtmlLink from '@/app/components/common/html-link';
import { VideoSelect } from '@/lib/database/repositories/video-repository';
import { useState } from 'react';

interface VideoCardProps {
  video: VideoSelect;
}

export default function VideoCard({ video }: VideoCardProps) {
  const [isImageLoaded, setIsImageLoaded] = useState(false);
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <div 
      className="group relative flex flex-col overflow-hidden rounded-xl bg-background-card shadow-md transition-all duration-300 hover:-translate-y-1.5 hover:shadow-xl touch-feedback"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* 标签容器 - 使用flex布局确保合理分布空间 */}
      <div className="absolute top-2 left-2 right-2 sm:top-2.5 sm:left-2.5 sm:right-2.5 z-30 flex justify-between items-start">
        {/* 备注信息 - 放在左侧 */}
        {video.vodRemarks && (
          <div className={`flex items-start text-center bg-accent-primary/85 text-white text-xs sm:text-sm px-1.5 sm:px-2 py-1 sm:py-1 rounded-md font-medium ${video.isVip ? 'max-w-[70%]' : 'max-w-full'}`}>
            <span className="line-clamp-2 leading-[1.2]">{video.vodRemarks}</span>
          </div>
        )}
        
        {/* VIP标签 - 放在右侧 */}
        {video.isVip && (
          <div className="flex items-center text-center justify-center px-1.5 sm:px-2 py-1 sm:py-1 bg-gradient-to-r from-yellow-500/90 to-red-500/90 text-xs text-white font-bold rounded-md shadow-md ml-1 leading-none">
            VIP
          </div>
        )}
      </div>
      
      {/* 封面图 */}
      <HtmlLink href={`/detail/${video.id}`} className="relative aspect-[3/4] w-full overflow-hidden">
        <div className={`absolute inset-0 flex items-center justify-center bg-background-darker text-gray-500 transition-opacity duration-200 ${isImageLoaded ? 'opacity-0' : 'opacity-100'}`}>
          <svg 
            className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 animate-pulse" 
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24" 
            xmlns="http://www.w3.org/2000/svg"
          >
            <path 
              strokeLinecap="round" 
              strokeLinejoin="round" 
              strokeWidth={2} 
              d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" 
            />
          </svg>
        </div>
        <Image
          src={video.vodPic || '/images/placeholder.jpg'}
          alt={video.vodName || ''}
          fill
          sizes="(max-width: 640px) 30vw, (max-width: 1024px) 25vw, 20vw"
          className={`object-cover transition-all duration-500 ease-in-out ${isImageLoaded ? 'opacity-100' : 'opacity-0'} ${isHovered ? 'scale-110 blur-[0.5px]' : ''}`}
          onLoad={() => setIsImageLoaded(true)}
          priority={false}
          loading="lazy"
        />
        
        {/* 渐变遮罩 */}
        <div className={`absolute scale-110 inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent transition-opacity duration-300 ${isHovered ? 'opacity-90' : 'opacity-75'}`}></div>
        
        {/* 播放按钮 - 仅在悬停时显示 */}
        <div className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center bg-accent-primary/80 rounded-full transition-all duration-300 ${isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-75'}`}>
          <svg className="w-4 h-4 sm:w-5 sm:h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
            <path d="M8 5v14l11-7z" />
          </svg>
        </div>
        
        {/* 视频信息 - 底部 */}
        <div className="absolute bottom-0 left-0 right-0 p-2.5 sm:p-3.5">
          <h3 className="font-medium line-clamp-2 text-white text-sm sm:text-base md:text-lg mb-0.5 sm:mb-1 text-center leading-[1.15] sm:leading-[1.2] md:leading-[1.15]" title={video.vodName}>
            {video.vodName}
          </h3>
          <div className="flex justify-between items-center text-xs sm:text-base text-gray-300">
            <span className="video-meta">{video.vodYear || '未知'}</span>
            {video.vodScore ? (
              <span className="inline-flex items-center video-meta">
                <svg 
                  className="w-3 h-3 sm:w-3.5 sm:h-3.5 text-yellow-400 mr-0.5" 
                  fill="currentColor" 
                  viewBox="0 0 20 20" 
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
                {video.vodScore.toFixed(1)}
              </span>
            ) : null}
          </div>
        </div>
      </HtmlLink>
    </div>
  );
} 